<template>
  <div class="table-form-body-button">
    <el-row>
      <span
        v-for="item in operateInfo"
        :key="item.btnName"
        class="btn-operate-above"
        :sapn="2"
      >
        <el-button
          v-if="item.location == '2' && item.btnType != 'import'"
          :type="item.cssType || 'default'"
          @click="item.method"
        >
          {{ item.name }}
        </el-button>
        <el-upload
          v-if=" item.btnType == 'import'"
          ref="upload"
          class="device-upload"
          :show-file-list="false"
          :action="importUrl()"
          :on-success="uploadSuccess"
          :auto-upload="true"
        >
          <el-button>批量导入</el-button>
        </el-upload>
      </span>
    </el-row>
  </div>
</template>
<script>
import waves from '@/directive/waves' // waves directive
export default {
  name: 'ListOpearteButton2',
  directives: { waves },
  props: ['dataLocation'],
  data() {
    return {
      operateInfo: []
    }
  },
  watch: {},
  mounted() {
    console.log(this.$store.state.button.currentMenuButton)
    this.operateInfo = this.$store.state.button.currentMenuButton.filter(
      (e) => {
        return e.location == '2'
      }
    )
  },
  methods: {
    importUrl() {
      const { fullPath } = this.$route
      const dataUrl = {
        '/device-basic/index': '/device/api/deviceAsset/import',
        '/plant-check/program': '/check/api/check/item/import',
        '/device-patrol/program': '/patrol/api/patrol/item/import'
      }
      return dataUrl[fullPath]
    },
    uploadSuccess(e) {
      console.log(e, '上传成功')
    }
  }
}
</script>
<style>
.btn-operate-above {
  margin: 0 10px;
}
.device-upload{
  display: inline-block;
}
</style>
